<route lang="jsonc" type="page">
    {
      "layout": "default",
      "style": {
        "navigationBarTitleText": "企业出海"
      },
      // 暂时需要登录，后续再改
      "needLogin": true
    }
    </route>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import book1 from '../static-assets/circle/bookkeeping_1.png'
import book2 from '../static-assets/circle/bookkeeping_2.png'
import book3 from '../static-assets/circle/bookkeeping_3.png'
import book4 from '../static-assets/circle/bookkeeping_4.png'

import cjSerFive from '../static-assets/circle/cj_ser_five.png'
import cjSerFour from '../static-assets/circle/cj_ser_four.png'
import cjSerOne from '../static-assets/circle/cj_ser_one.png'
import cjSerThree from '../static-assets/circle/cj_ser_three.png'
import cjSerTwo from '../static-assets/circle/cj_ser_two.png'

// 服务项目
const services = ref([
  {
    id: 1,
    title: '海外公司设立',
    description: '根据您的需求，在目标国家设立分公司或子公司',
    circleImg: cjSerOne,
  },
  {
    id: 2,
    title: '海外公司管理',
    description: '提供财务、税务、人力资源等方面的管理支持。',
    circleImg: cjSerTwo,
  },
  {
    id: 3,
    title: '合规咨询',
    description: '提供专业顾问海外服务咨询，确保业务合规',
    circleImg: cjSerThree,
  },
  {
    id: 4,
    title: '市场调研',
    description: '进行目标市场的深入调研，提供市场准入建议',
    circleImg: cjSerFour,
  },
  {
    id: 5,
    title: '商务支持',
    description: '提供资质认证、申请、备案、翻译等支持服务',
    circleImg: cjSerFive,
  },
])

// 设置 accountingPractices
const accountingPractices = ref([
  {
    id: 1,
    title: '高效便捷',
    description: '快至1个月即可完成大部分海外公司设立流程',
    bookkeepImg: book1,
    bg_color: 'linear-gradient(88.31deg, rgba(255, 218, 218, 0.6) 0.05%, rgba(255, 239, 239, 0.6) 99.95%)',
  },
  {
    id: 2,
    title: '专业可靠',
    description: '专业顾问团队，确保每一步都符合当地政策',
    bookkeepImg: book2,
    bg_color: 'linear-gradient(88.31deg, rgba(255, 228, 215, 0.6) 0.05%, rgba(255, 244, 239, 0.6) 99.95%)',
  },
  {
    id: 3,
    title: '一站式服务',
    description: '全程代办，覆盖海外公司设立与管理全过程',
    bookkeepImg: book3,
    bg_color: 'linear-gradient(88.31deg, rgba(218, 240, 255, 0.6) 0.05%, rgba(235, 247, 255, 0.6) 99.95%)',
  },
  {
    id: 4,
    title: '透明收费',
    description: '一次性标准报价，中途不恶意加价',
    bookkeepImg: book4,
    bg_color: 'linear-gradient(88.31deg, rgba(217, 219, 255, 0.6) 0.05%, rgba(238, 239, 255, 0.6) 99.95%)',
  },
])

const model = reactive<{
  phone: string
}>({
  phone: '',
})

const form = ref()

function handleSubmit() {
  form.value
    .validate()
    .then(({ valid, errors }) => {
      if (valid) {
        uni.showToast({
          title: '校验通过',
          icon: 'success',
        })
        // toast.success('校验通过')
      }
    })
    .catch((error) => {
      console.log(error, 'error')
    })
}
</script>

<template>
  <view class="bg-#f5f5f5 pb-30rpx">
    <!-- 顶部banner -->
    <view class="h-350rpx overflow-hidden p-20rpx">
      <image src="https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/heard_img.png" mode="widthFix" :lazy-load="true" />
    </view>

    <!-- 解决方案 -->
    <view class="m-20rpx rounded-12rpx bg-white p-30rpx">
      <view class="mb-20rpx text-left text-32rpx font-bold">
        海外公司注册，无需亲赴
      </view>
      <wd-form ref="form" :model="model">
        <wd-cell-group border>
          <view style="border-bottom: 1px solid #e5e5e5;">
            <wd-input
              v-model="model.phone"
              label="手机号"
              label-width="31%"
              prop="phone"
              :maxlength="11"
              clearable
              placeholder="请输入手机号"
              :rules="[{ required: true, message: '请输入手机号' }]"
            >
              <template #prefix>
                <image
                  src="/static/phone.svg"
                  mode="scaleToFill"
                  class="h-40rpx w-40rpx"
                />
              </template>
            </wd-input>
          </view>
        </wd-cell-group>
        <view class="mt-40rpx">
          <wd-button type="primary" size="large" custom-class="red_button" block @click="handleSubmit">
            立即咨询
          </wd-button>
        </view>
      </wd-form>
    </view>

    <view class="m-20rpx rounded-12rpx bg-white p-20rpx">
      <view class="mb-30rpx flex items-center pl-10rpx text-32rpx font-bold">
        注册热门国家/地区
      </view>
      <scroll-view scroll-x class="whitespace-nowrap" style="width: auto;">
        <image src="../static-assets/images/usa.png" mode="widthFix" class="w-256rpx pr-10rpx" :lazy-load="true" />
        <image src="../static-assets/images/usa.png" mode="widthFix" class="w-256rpx pr-10rpx" :lazy-load="true" />
        <image src="../static-assets/images/usa.png" mode="widthFix" class="w-256rpx pr-10rpx" :lazy-load="true" />
        <image src="../static-assets/images/usa.png" mode="widthFix" class="w-256rpx pr-10rpx" :lazy-load="true" />
      </scroll-view>

    </view>

    <!-- 出海服务 -->
    <view class="m-20rpx overflow-hidden rounded-12rpx bg-white p-20rpx">
      <view>
        <view>
          <view class="text-32rpx text-black font-bold">
            工商注册
          </view>
        </view>
        <view class="mt-20rpx">
          <view class="grid grid-cols-2 gap-15rpx">
            <view
              v-for="service in services"
              :key="service.id"
              class="relative h-142rpx overflow-hidden rounded-12rpx bg-#f9f9f9 p-20rpx"
            >
              <image
                :src="service.circleImg"
                mode="scaleToFill"
                class="absolute inset-0 h-full w-full" :lazy-load="true"
              />
              <view class="relative z-10 mt-10rpx">
                <view class="mb-10rpx text-28rpx font-500">
                  {{ service.title }}
                </view>
                <view class="line-clamp-2 text-24rpx text-#666">
                  {{ service.description }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="m-20rpx overflow-hidden rounded-12rpx bg-white p-20rpx">
      <view>
        <view>
          <view class="text-32rpx text-black font-bold">
            服务优势
          </view>
        </view>
        <view class="mt-20rpx">
          <view class="grid grid-cols-1 gap-15rpx">
            <view
              v-for="service in accountingPractices"
              :key="service.id"
              class="flex items-center justify-between overflow-hidden rounded-12rpx bg-#f9f9f9 p-20rpx"
              :style="{ background: service.bg_color }"
            >
              <view>
                <view class="mb-10rpx text-28rpx font-500">
                  {{ service.title }}
                </view>
                <view class="line-clamp-3 text-24rpx text-#666">
                  {{ service.description }}
                </view>
              </view>
              <image
                :src="service.bookkeepImg"
                mode="scaleToFill"
                class="h-88rpx w-88rpx"
              />
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="m-20rpx rounded-12rpx bg-white p-20rpx">
      <view class="mb-30rpx flex items-center pl-10rpx text-32rpx font-bold">
        合作机构
      </view>
      <scroll-view scroll-x class="whitespace-nowrap px-4" style="width: auto;">
        <image src="https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/heard_img.png" mode="aspectFill" class="mr-4 h-40 w-60 rounded-md" :lazy-load="true" />
        <image src="https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/heard_img.png" mode="aspectFill" class="mr-4 h-40 w-60 rounded-md" :lazy-load="true" />
        <image src="https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/heard_img.png" mode="aspectFill" class="mr-4 h-40 w-60 rounded-md" :lazy-load="true" />
        <image src="https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/heard_img.png" mode="aspectFill" class="mr-4 h-40 w-60 rounded-md" :lazy-load="true" />
      </scroll-view>
    </view>
  </view>
</template>
